<template>
  <tiny-row :flex="true" justify="center" @wheel="handlePageChange">
    <tiny-col :span="8">
      <tiny-tabs v-model="activeName" tab-style="card">
        <tiny-tab-item title="博客" name="blog">
          <div class="filter">
            <span @click="changeBGC(true)" :style="{'background-color':hotBGC,'border-radius':'5px'}">最新</span>
<!--            <span @click="changeBGC(false)" :style="{'background-color':newBGC,'border-radius':'5px'}">热门</span>-->
          </div>
          <div v-if="contentList.length > 0" class="blog-content">
            <ContentList />
          </div>
          <div v-else style="margin-top:15px;">暂无数据</div>
        </tiny-tab-item>
        <tiny-tab-item title="用户" name="user">
          <div class="user-list">
            <div
                v-if="userList.length > 0"
                class="user"
                v-for="user in userList"
                :key="user.id"
                @click="toContentManage(user.id)"
            >
              <img :src="user.avatar" alt="头像" width="100" height="100" />
              <span>{{user.nickname}}</span>
            </div>
            <div v-else>
              <span>暂无数据</span>
            </div>
          </div>
        </tiny-tab-item>
      </tiny-tabs>
    </tiny-col>
    <tiny-col :span="4">
      <div class="relation-search">
        <div class="card">
          <div class="card2">
            <div class="header">
              <span style="margin:8px 0 0 12px;font-weight:bold;font-size:20px;">热门排行</span>
            </div>
            <hr style="border-color: #f0f0f2"/>
            <div class="search-list">
              <tiny-tag
                  v-for="rank in rankList"
                  :key="rank.value"
                  style="margin:0 8px 8px 0"
              >
                <span>{{ rank.name }}</span>
              </tiny-tag>
            </div>
          </div>
        </div>
      </div>
      <div class="discover-search">
        <div class="nav">
          <div>搜索发现</div>
        </div>
        <div
            class="list"
            v-for="(discovery,index) in discoveryList"
            :key="discovery.id"
        >
            <span>
              <span
                  v-if="index < 3"
                  style="display: inline-block;width:20px;height:20px;text-align: center;margin-right:5px;color:orange"
              >
                {{index + 1}}
              </span>
              <span v-else style="display: inline-block;width:20px;height:20px;text-align: center;margin-right:5px;">{{index + 1}}</span>
              <span @click="toArticleDetail(discovery.id)" v-if="discovery.title.length > 15">
                {{discovery.title.substring(0,15)}}...
              </span>
              <span @click="toArticleDetail(discovery.id)" v-else>
                {{discovery.title.substring(0,15)}}
              </span>
            </span>
        </div>
      </div>
    </tiny-col>
  </tiny-row>
</template>

<script setup>
import {
  Tabs as TinyTabs, TabItem as TinyTabItem, Row as TinyRow, Col as TinyCol,
  Tag as TinyTag, Modal
} from '@opentiny/vue'
import {onMounted, onUnmounted, ref} from 'vue'
import ContentList from '../components/ContentList.vue'
import {useRouter,useRoute} from "vue-router";
import request from "../utils/request.js";
import {useContentStore} from "../store/useContentStore.js";
import {storeToRefs} from "pinia";
import {debounce} from "lodash";


document.title = '唯忆博客'
const contentStore = useContentStore()
const {contentList} = storeToRefs(contentStore)
const route = useRoute()
const title = route.query.title
const router = useRouter()
const hotBGC = ref('#fff')
const newBGC = ref('#fff')
const activeName = ref('blog')
const rankList = ref([])
const discoveryList = ref([])
const userList = ref([])
const pageNum = ref(1)
const pageSize = ref(150000) // 暂时不分页
const pageTotal = ref(0)
const typeStyleFlag = ref(true)



// todo 处理分页
// const handlePageChange = debounce((event) => {
//   if (event.deltaY > 0) {
//     // 判断是否还继续分页
//     if (contentList.value.length !== pageTotal.value) {
//       pageNum.value++
//       const temp = {
//         title,
//         type:0,
//         pageParam:{
//           pageNum:pageNum.value,
//           pageSize:pageSize.value
//         }
//       }
//       request.post('/api/contents/articles/page',temp).then(res => {
//         if (res.code === 1){
//           contentList.value = [...contentList.value,...res.data.records]
//         }else {
//           Modal.message({message:res.message,status:'error'})
//         }
//       })
//     }else {
//       Modal.message({message: '已经到底了', status: 'warning',duration:1500})
//       return
//     }
//   }
//
// }, 100)
//
// onMounted(() => {
//   window.addEventListener('wheel', handlePageChange);
// });
//
// onUnmounted(() => {
//   window.removeEventListener('wheel', handlePageChange);
// });

// 跳转文章详细页
const toArticleDetail = articleId => {
  const {href} = router.resolve(`/article/detail/${articleId}`)
  window.open(href,'_blank')
}

// 搜索发现 针对数据量较多的情况
const querySearchDiscoveryList = () => {
  request.get('/api/contents/articles/discovery',{
    params:{
      title
    }
  }).then(res => {
    if (res.code === 1){
      discoveryList.value = res.data
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}
querySearchDiscoveryList()

// 查询词云图数据
const queryRankList = () => {
  request.get('/api/contents/articles/wordClouds').then(res => {
    if (res.code === 1){
      rankList.value = res.data.slice(0,10)
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}
queryRankList()

// 跳转到用户管理页
const toContentManage = (userId) => {
  router.push(`content/manage/${userId}`)
}

// 根据搜索词搜索用户
const queryUserList = () => {
  request.get('/api/users/listByNickname/',{
    params:{
      pageNum:pageNum.value,
      pageSize:1500000, // 这里不分页，查询全部用户
      nickname:title ? title : ''
    }
  }).then(res => {
    if (res.code === 1){
      userList.value = res.data.records
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}
queryUserList()

// 搜根据搜索词搜索
const queryArticleListByTitle = () => {
  const temp = {
    title,
    type:0,
    pageParam:{
      pageNum:pageNum.value,
      pageSize:pageSize.value
    }
  }
  // todo 默认应该是热门查询，这里先最新查询 type:1
  request.post('/api/contents/articles/page',temp).then(res => {
    if (res.code === 1){
      contentList.value = res.data.records
      pageTotal.value = res.data.total
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}
queryArticleListByTitle()

// 改变span颜色
const changeBGC = (flag) => {
  if (flag !== undefined)
    typeStyleFlag.value = flag
  if (typeStyleFlag.value) {
    hotBGC.value = '#ddd'
    newBGC.value = '#fff'
  } else {
    hotBGC.value = '#fff'
    newBGC.value = '#ddd'
  }
}
changeBGC()

</script>

<style lang="less" scoped>
.user-list{
  .user{
    img{
      border-radius: 100px;
      margin-right:10px;
    }
    margin:0 30px 30px 0;
    display: flex;
    align-items: center;
    cursor:pointer;
  }
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.discover-search{
  .list:hover{
    color:#fc5636;
  }
  .list{
    margin-bottom:10px;
    cursor:pointer;
  }
  .nav {
    div {
      width: 80px;
      margin-left: 20px;
      text-align: center;
      cursor: pointer;
    }

    height: 32px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    line-height: 32px;
    margin-bottom: 10px;
  }
  width: 65%;
  margin-top:15px;
}

.relation-search {
  .search-list {
    span:hover{
      cursor:pointer;
      background-color:#ddd;
    }
    margin: 10px 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .card {
    width: 80%;
    height: 100%;
    background-image: linear-gradient(163deg,#2c3e50 0%,#bdc3c7 100%);
    border-radius: 5px;
    transition: all .3s;
  }

  .card2 {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    transition: all .2s;
    border: 1px solid #ddd;
  }

  .card2:hover {
    transform: scale(0.99);
    border-radius: 5px;
    border: 0;
  }

  .card:hover {
    box-shadow: 0px 0px 30px 1px rgba(180, 189, 184, 0.3);
  }
  width:80%;
}

.blog-content {
  margin-top: 20px;
}

.filter {
  span {
    width: 40px;
    cursor: pointer;
  }

  display: flex;
  align-items: center;
  text-align: center;
}
</style>
